<template>
  <div class="py-6">
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-900">创建工单</h1>
      <p class="mt-1 text-sm text-gray-500">提交新的服务请求</p>
    </div>

    <div class="bg-white shadow sm:rounded-lg">
      <div class="px-4 py-5 sm:p-6">
        <form class="space-y-6">
          <div>
            <label for="title" class="block text-sm font-medium text-gray-700">工单标题</label>
            <div class="mt-1">
              <input type="text" id="title" class="shadow-sm focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md" placeholder="简要描述您的问题">
            </div>
          </div>

          <div>
            <label for="category" class="block text-sm font-medium text-gray-700">问题分类</label>
            <div class="mt-1">
              <select id="category" class="shadow-sm focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md">
                <option value="">请选择问题分类</option>
                <option value="network">网络问题</option>
                <option value="hardware">硬件故障</option>
                <option value="software">软件安装</option>
                <option value="account">账户权限</option>
                <option value="other">其他问题</option>
              </select>
            </div>
          </div>

          <div>
            <label for="priority" class="block text-sm font-medium text-gray-700">优先级</label>
            <div class="mt-1">
              <select id="priority" class="shadow-sm focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md">
                <option value="low">低</option>
                <option value="medium" selected>中</option>
                <option value="high">高</option>
                <option value="urgent">紧急</option>
              </select>
            </div>
          </div>

          <div>
            <label for="description" class="block text-sm font-medium text-gray-700">问题描述</label>
            <div class="mt-1">
              <textarea id="description" rows="5" class="shadow-sm focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md" placeholder="请详细描述您遇到的问题，包括问题发生的时间、具体现象等"></textarea>
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700">附件</label>
            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
              <div class="space-y-1 text-center">
                <i class="fa fa-cloud-upload text-gray-400 mx-auto h-12 w-12"></i>
                <div class="flex text-sm text-gray-600">
                  <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary-dark focus-within:outline-none">
                    <span>上传文件</span>
                    <input id="file-upload" name="file-upload" type="file" class="sr-only">
                  </label>
                  <p class="pl-1">或拖拽文件到此处</p>
                </div>
                <p class="text-xs text-gray-500">PNG, JPG, GIF, PDF up to 10MB</p>
              </div>
            </div>
          </div>

          <div class="flex justify-end">
            <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
              取消
            </button>
            <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
              提交工单
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>